<template>
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      data: [
        {
          "id": "3",
          "device_id": "3",
          "camera_id": "4",
          "max_temperature": "28.00",
          "image_path": "123123/123.png",
          "alert_time": "2025-02-24 20:23:32"
        },
        {
          "id": "1",
          "device_id": "3",
          "camera_id": "4",
          "max_temperature": "42.00",
          "image_path": "123123/123.png",
          "alert_time": "2025-02-24 20:07:05"
        },
        {
          "id": "2",
          "device_id": "3",
          "camera_id": "5",
          "max_temperature": "38.00",
          "image_path": "23123/123.png",
          "alert_time": "2025-02-24 20:15:16"
        }
      ]
    }
  },
  mounted() {
    // 格式化数据
    const alertTimes = this.data.map(item => item.alert_time);
    const maxTemperatures = this.data.map(item => parseFloat(item.max_temperature));

    // 初始化 ECharts 实例
    const myChart = echarts.init(document.getElementById('main'));

    const option = {
      title: {
        text: '温度变化折线图'
      },
      tooltip: {},
      legend: {
        data: ['数据点 1', '数据点 2', '数据点 3']
      },
      xAxis: {
        type: 'category',
        data: alertTimes
      },
      yAxis: {
        type: 'value',
        name: '最大温度 (°C)'
      },
      series: [
        {
          name: '数据点 1',
          type: 'line',
          data: [maxTemperatures[0], null, null], // 只显示第一组数据
          itemStyle: { color: 'red' }
        },
        {
          name: '数据点 2',
          type: 'line',
          data: [null, maxTemperatures[1], null], // 只显示第二组数据
          itemStyle: { color: 'green' }
        },
        {
          name: '数据点 3',
          type: 'line',
          data: [null, null, maxTemperatures[2]], // 只显示第三组数据
          itemStyle: { color: 'blue' }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  }
}
</script>